<template>
  <div class="app userMenu">
    <div v-for="OneMenu in permissionMenuList">
      <a-popover v-if="OneMenu.children && OneMenu.children.length>0" placement="right">
        <template slot="content">
          <div class="menu-box" :style="{columnCount:calcNum(OneMenu)}">
            <ul class="clearfix" v-for="(TwoMenu,index) in OneMenu.children" :key="index">
              <li class="clearfix fl">
                <div v-if="TwoMenu.children&&TwoMenu.children.length>0" class="title text-clip">
                  <a-tooltip :mouseLeaveDelay="0">
                    <template slot='title'>
                      {{TwoMenu.meta.title}}
                    </template>
                    {{TwoMenu.meta.title}}
                  </a-tooltip>
                </div>
                <div v-else>
                  <span class="fl text-clip color-blue" @click="menuClick(TwoMenu.name,TwoMenu.meta)">
                    <a-tooltip :mouseLeaveDelay="0">
                      <template slot='title'>
                        {{TwoMenu.meta.title}}
                      </template>
                      {{TwoMenu.meta.title}}
                    </a-tooltip>
                  </span>
                  <a class="fr" style="margin-right:-0px" @click="addMenu(TwoMenu)" title="加入我的常用功能">+</a>
                </div>
                <ul v-if="TwoMenu.children&&TwoMenu.children.length>0" v-for="ThrMenu in TwoMenu.children">
                  <li class="clearfix" style="padding-left:10px ">
                    <div v-if="ThrMenu.children&&ThrMenu.children.length>0" class="title text-clip">
                      <a-tooltip :mouseLeaveDelay="0">
                        <template slot='title'>
                          {{ThrMenu.meta.title}}
                        </template>
                        {{ThrMenu.meta.title}}
                      </a-tooltip>
                    </div>
                    <div v-else>
                      <span class="fl text-clip color-blue" @click="menuClick(ThrMenu.name,ThrMenu.meta)">
                        <a-tooltip :mouseLeaveDelay="0">
                          <template slot='title'>
                            {{ThrMenu.meta.title}}
                          </template>
                          {{ThrMenu.meta.title}}
                        </a-tooltip>
                      </span>
                      <a class="fr" @click="addMenu(ThrMenu)" title="加入我的常用功能">+</a>
                    </div>
                    <ul v-if="ThrMenu.children&&ThrMenu.children.length>0" v-for="FourMenu in ThrMenu.children" style="margin: 0;padding: 0;">
                      <li class="clearfix" style="padding-left:20px ">
                        <span class="fl text-clip color-blue" @click="menuClick(FourMenu.name,FourMenu.meta)">
                          <a-tooltip :mouseLeaveDelay="0">
                            <template slot='title'>
                              {{FourMenu.meta.title}}
                            </template>
                            {{FourMenu.meta.title}}
                          </a-tooltip>
                        </span>
                        <a class="fr position" @click="addMenu(FourMenu)" title="加入我的常用功能">+</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </template>
        <a-button class="bt" block>
          <a-icon :type="iconsRandomNumber()" />
          {{OneMenu.meta.title}}
        </a-button>
      </a-popover>
    </div>
  </div>
</template>
<script type="text/javascript">
import { mapState } from 'vuex'
import { ICONS } from '@/store/mutation-types'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"

let iconNum = 0
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    })
  },
  methods: {
    //将菜单加入常用菜单栏
    addMenu(item) {
      let that = this;
      let params = {
        typeId: 2,
        menuId: item.id,
        ticket: Vue.ls.get(ACCESS_TOKEN),
        path: process.env.VUE_APP_ADD_HTTP
      };
      this.getRequest("/common/UpdateFrenquentFunIndex", params).then(res => {
        this.$emit('setRefreshMenu', item.id)
        this.$message.success("加入常用功能成功！");
      })
    },
    calcNum(item) {
      if (item && item.children) {
        if (item.children.length > 8) {
          return 4
        } else if (item.children.length > 3) {
          return 3
        } else {
          return 1
        }
      } else {
        return 1
      }
    },
    iconsRandomNumber() {
      if (iconNum >= ICONS.length) {
        iconNum = 0;
      }
      return ICONS[iconNum++].name;
    },
    menuClick(name,item) {
      let url = item.url;
      //需要IE打开
      if (url.indexOf('bisp://cmd/?指定浏览器打开链接||') == 0 || url.indexOf('bisp://cmd/?openlinkbywebbrowser||') == 0) {
        //url = url.replace("#", "");
        window.open(url,"_parent");
        return;
      }
      //ftp
      if(url.startsWith('ftp://')){
        window.open(url,"_blank");
        return;
      }
      //TODO
      // 特殊处理
      if(item.title.indexOf('“一张图”数据管理') == 0 ){
        window.open(url);
        return
      }
      this.$router.push({ name: name });
    },
  }
}
</script>
<style>
.app {
  width: 100%;
  /*height:500px;*/
  /*max-height: calc(100vh - 257px);*/
  overflow-x: hidden;
  overflow-y: auto;
}

.app {
  scrollbar-face-color: #1890FF;
  /*移动滑块颜色*/
  scrollbar-shadow-color: #1890FF;
  /*移动滑块边框颜色*/
  scrollbar-track-color: #ccc;
  /*背景颜色*/
  scrollbar-arrow-color: #ddd;
  /*箭头颜色*/
}

.app::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #ccc;
}

.app::-webkit-scrollbar {
  width: 6px;
  background-color: #ccc;
}

.app::-webkit-scrollbar-thumb {
  background-color: #1890FF;
}

.acard {
  cursor: pointer !important;
}

.p {
  color: #1890FF !important;
}

.ddl {
  background-color: #ececec;
  padding: 20px;
}

/*.divi{*/
/*height: 380px;*/
/*background-color: #FFFFFF;*/
/*}*/
.ddl dl dt {
  display: block;
  float: left;
  width: 200px;
  height: 30px !important;
  line-height: 22px;
  text-align: right;
  /*padding-right:6px;*/
}

.bt:hover {
  color: #ffffff !important;
  background-color: #1890FF !important;
}

.bt :active {
  color: #1890FF !important;
}

.ddl dl dd {
  display: block;
  overflow: hidden;
}

.ddl dl dd a {
  display: block;
  float: left;
  padding: 0 8px;
  height: 14px;
  line-height: 14px;
  text-align: center !important;
  border-left: 2px solid #ccc;
  font-weight: 500;
  font-size: 13px;
  margin-top: 4px;
}



.bt1,
.bt {
  border: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.bt {
  color: rgba(0, 0, 0, 0.65) !important;
  height: 50px !important;
  border-radius: 0px !important;
  text-align: left !important;
  padding-left: 30px !important;
}

.bt1 {
  font-weight: 900;
  color: #1890FF !important;
  height: 50px !important;
  text-align: left !important;
  border-radius: 0px !important;
  padding-left: 50px !important;
  font-weight: bold !important;
}

ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu-box {
  padding: 15px;
  /*column-count: 3;*/
  background: #F5F6F8;
}

.menu-box>ul {
  background: #fff;
  padding: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
}

.menu-box ul li {
  padding: 3px;
  width: 200px !important;
  box-sizing: border-box;
}

.menu-box ul li a {
  cursor: pointer;
}


.menu-box ul li .title {
  font-weight: 600;
  color: #000000;
}

.menu-box ul li .position {
  position: relative;
  top: 0;
  right: 10px;
}
</style>
<style scoped>
.color-blue {
  cursor: pointer;
}

.text-clip {
  width: 168px !important;
}

.userMenu {
  padding-left: 10px;
  margin-top: 20px;
  margin-bottom: 200px;
}
</style>